<template>
    <div class="container mx-auto py-16">
        <h2 class="text-6xl font-medium text-white mb-12 font-playball tracking-wide">Bestsellers</h2>
        <!-- 产品展示区（骨架、分页、空状态） -->
        <div class="mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 py-2 bg-[#111315]">
            <template v-if="loading">
                <div v-for="i in 12" :key="i" class="flex flex-col">
                    <div class="w-full aspect-square rounded-lg bg-[#232325] flex items-center justify-center">
                        <a-skeleton-shape shape="square" class="w-full h-full rounded-lg bg-[#232325]"
                            animation />
                    </div>
                    <div class="mt-4 h-5 rounded bg-[#232325]"></div>
                    <div class="flex items-center justify-between mt-3">
                        <div class="h-4 w-16 rounded bg-[#232325]"></div>
                        <div class="h-4 w-8 rounded bg-[#232325]"></div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div v-for="(val, key) in product" :key="key"
                    class="flex flex-col cursor-pointer group">
                    <img :src="val.main_image ? settings.static.baseUrl + val.main_image : '/placeholder.jpg'"
                        class="w-full aspect-square object-cover rounded-lg hover:scale-105 transition-transform duration-500" />
                    <div class="mt-4 text-white font-medium font-poppins text-base truncate">{{ val.name || 'Untitled Product' }}</div>
                    <div class="flex items-center justify-between mt-3">
                        <div class="flex items-baseline font-bold">
                            <span class="text-rose-600 leading-0.5 mr-1">$</span>
                            <span class="text-rose-600 text-3xl">
                                {{ getIntegerPart(val.min_price_amount) }}
                                <span class="text-base">.{{ getDecimalPart(val.min_price_amount) }} </span>
                                <span class="text-white text-base ml-2">USD</span>
                            </span>
                        </div>
                        <button class="w-[100px] !bg-rose-600 text-white !cursor-pointer !text-xs py-1 rounded hover:!bg-rose-700 transition">
                            ADD TO CART
                        </button>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { getProductsForCreator } from '@/api/index';
import { components } from '@/types/api';
import settings from '@/constants/settings';
import { getIntegerPart, getDecimalPart } from '@/utils/helper';

type ProductType = components['schemas']['SchemaProductSearch'];

export default defineComponent({
    name: 'Product',
    data() {
        return {
            /*
            * 产品
            */
            product: [] as ProductType[],
            /*
            * 是否加载中
            */
            loading: true
        }
    },
    setup() {
        return {
            settings,
            getIntegerPart,
            getDecimalPart
        }
    },
    methods: {
        /*
        * 获取最低价格
        */
        getLowestPrice(product: ProductType): number {
            return product.min_price_amount || 0;
        },
        /*
        * 获取产品
        */
        async getProducts() {
            this.loading = true;
            const data = await getProductsForCreator({
                keyword: null,
                category_id: null,
                sort: 'created_at',
                pagination: {
                    page: 1,
                    size: 12
                }
            });
            this.product = data.data;
            this.product.forEach((item: ProductType) => {
                item.min_price_amount = Number((item.min_price_amount / 100).toFixed(2));
            });
            this.loading = false;
        }
    },
    mounted() {
        this.getProducts();
    }
});
</script>
<style>
.price-block .amount {
    color: #ff5722;
    font-size: 1.6rem;
    line-height: 1;
    display: inline-block;
}
.price-block .decimal {
    font-size: 1.1rem;
    position: relative;
    top: 0em;
    margin-left: 1px;
}
</style>